import React, { useState } from 'react'
import './index.scss'
import http from '../../utils/http'
import { CheckOutline, CloseOutline } from 'antd-mobile-icons'
import { AlipaySquareFill } from 'antd-mobile-icons'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { NavBar, Tag, Card, List, Checkbox, Input, Popup, Modal } from 'antd-mobile';
import { ProductCard, Toast } from 'react-vant';
function Index() {
    const navigate = useNavigate()
    const { state } = useLocation()
    const [sq] = useSearchParams()
    const allprice = sq.get('allprice')
    const [value, setValue] = useState('asdadasasfaadsddas')
    const [visible1, setVisible1] = useState(false)
    const handleorpay = async () => {
        const res = await http.get('/api/pay', {
            params: {
                title: '支付成功',
                id: Date.now(),
                price: allprice
            }
        })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            window.location.href = data
        }

        const pays = setInterval(async () => {
            const res1 = await http.get('/api/query', {
                params: {
                    id: state.id
                }
            })
            const { code, message } = res1.data

            if (code === 200) {
                Toast.show(message);
                clearInterval(pays);
                navigate("/success");
            } else {
                Toast.show(message);
                clearInterval(pays);
            }
        }, 3000);

    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>确认订单</NavBar>
            <div>
                <ProductCard
                    num={state.date}
                    price={<Tag round color='#2db7f5'>
                        ￥{state.price}
                    </Tag>}
                    desc={state.title}
                    title={state.id}
                    thumb={state.image}
                />
            </div>
            <Card title='支付方式'>
                最近使用
                <List.Item
                    prefix={<span style={{ fontSize: '50px' }}><AlipaySquareFill /></span>}
                    description={'余额:99999.00'}
                    extra={<Checkbox />}
                >
                    支付宝
                </List.Item>
            </Card>
            <Card title='优惠码'>
                <List.Item
                    extra={<Checkbox />}
                >
                    <Input
                        placeholder='请输入内容'
                        disabled={true}
                        value={value}
                        onChange={val => {
                            setValue(val)
                        }}
                    />
                </List.Item>
            </Card>
            <Card title='订单信息'>
                <List.Item
                    prefix={'价格'}
                    extra={<div>￥{allprice}</div>}
                >
                </List.Item>
                <List.Item
                    prefix={'优惠券'}
                    extra={<div>-￥50</div>}
                >
                </List.Item>
                <List.Item
                    prefix={'总计'}
                    extra={<div>￥{allprice - 50}</div>}
                >
                </List.Item>
            </Card>
            <div className='bottom-wroe' onClick={() => setVisible1(true)}>
                确定
            </div>
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                <div className='box_wroe'>
                    <span className='span1' onClick={() => handleorpay()}>支付宝</span>
                    <span className='span2'>微信</span>
                    <span className='span3'>云闪付</span>
                </div>
            </Popup>
        </div>
    )
}

export default Index
